<template>
    <view class="mainClass">
        <Navbar title="首页" :leftArrow="false"> </Navbar>
        <scroll-view :show-scrollbar="false" :scroll-with-animation="true">
            <view
                class="bg-white mt-10rpx p-30rpx"
                v-for="(item, index) in appList"
                :key="index"
            >
                <view class="fw-500 text-hex-000000 mb-20rpx text-32rpx">{{
                    item.modeTitle
                }}</view>
                <van-grid column-num="4" gutter="5">
                    <van-grid-item
                        use-slot
                        v-for="(child, index) in item.list"
                        :key="index"
                    >
                        <navigator :url="child.address">
                            <p
                                class="flex flex-items-center flex-justify-center flex-col"
                            >
                                <image
                                    :src="
                                        '../../static/image/' +
                                        child.image +
                                        '.png'
                                    "
                                    class="wh-48rpx mb-20rpx"
                                />
                                <span class="text-hex-333333">{{
                                    child.name
                                }}</span>
                            </p>
                        </navigator>
                    </van-grid-item>
                </van-grid>
            </view>
        </scroll-view>
    </view>
</template>

<script>
import { defineComponent, reactive, toRefs, onMounted } from 'vue'
import { getCodeImg, setIogin } from '@/api/login.js'
export default defineComponent({
    props: {},
    setup(props, { emit }) {
        const state = reactive({
            appList: [
                {
                    modeTitle: '工程管理',
                    list: [
                        {
                            name: '工程统计',
                            image: 'projectStatistics',
                            address: '/pages/application/projectStatistics',
                        },
                    ],
                },
                {
                    modeTitle: '合同报审',
                    list: [
                        {
                            name: '工程报审',
                            image: 'projectAudit',
                            address: '/pages/application/projectAudit',
                        },
                        {
                            name: '商务合同',
                            image: 'business',
                            address: '/pages/application/businessContract',
                        },
                    ],
                },
            ],
        })
        const methods = {}
        const apis = {}
        const computeds = {}
        onMounted(() => {})
        return {
            ...apis,
            ...toRefs(state),
            ...methods,
            ...computeds,
        }
    },
})
</script>

<style lang="less" scoped>
.mainClass {
}
</style>
